<template>
  <div class="main-box">
    <div class="main" v-show="cards.length !== 0">
      <div class="main-content">
        <div class="topped">
          <div class="topped-header">
            <h2 class="left">置顶课程</h2>
            <div class="right">
              <el-button type="primary" @click="joinDialogFormVisible = true" v-show="role==='student'">
                <div class="add">
                  <i class="el-icon-plus"></i>
                  <p>加入课程</p>
                </div>
              </el-button>
              <el-dropdown @command="handleCommand" trigger="click">
                <el-button type="primary" v-show="role==='teacher'">
                  <div class="add">
                    <i class="el-icon-plus"></i>
                    <p>创建/加入课程</p>
                  </div>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="establish">创建课程</el-dropdown-item>
                  <el-dropdown-item command="join">加入课程</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="topped-main">
            <div class="main-card" v-for="(item,index) in cards" :key="index">
              <span class="upper-right-corner" v-show="item.isMix === 1">混合</span>
              <div class="card-header" @click="intoClass(item)"
                   :style="{ backgroundImage: 'url(' + item.backgroundImage + ')' }">
                <p class="time">{{ item.courseTime }}</p>
                <h3 class="name">{{ item.courseName }}</h3>
                <p class="classname">{{ item.studyClass }}</p>
                <div class="qrcode">
                  <img src="../../assets/img/main/qrcode.png" alt="ha">
                  <span class="code">加课码:{{ item.courseCode }}</span>
                </div>
              </div>
              <div class="card-content">
              </div>
              <div class="card-foot">
                <div class="left">
                  <span class="role" v-if="role==='student'">学</span>
                  <span class="role" v-else>教</span>
                  <span class="res-person">负责人:{{ item.courseTeacher }}</span>
                </div>
                <div class="right">
                  <div class="set-top" @click="cancelTop(index)">取消置顶</div>
                  <div class="three-point">
                    <el-dropdown trigger="click" @command="handleCommandClass">
                      <span class="el-dropdown-link"><i class="el-icon-more"></i> </span>
                      <el-dropdown-menu>
                        <el-dropdown-item command="dropClass">退课</el-dropdown-item>
                        <drop-class :courseName="item.courseName"></drop-class>
                        <el-dropdown-item command="backFile">归档</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right1" v-show="cards.length === 0">
      <el-button type="primary" v-show="role==='student'" @click="joinDialogFormVisible=true">
        <div class="add">
          <i class="el-icon-plus"></i>
          <p>加入课程</p>
        </div>
      </el-button>
      <!--      <el-dialog title="加入课程" :visible.sync="joinDialogFormVisible" :close-on-click-modal="false"-->
      <!--                 style="text-align: left">-->
      <!--        <el-form :model="joinForm" ref="form">-->
      <!--          <el-form-item label="加课码" :label-width="formLabelWidth" prop="code"-->
      <!--                        :rules="joinRules" class="is-required">-->
      <!--            <el-input v-model="joinForm.code" autocomplete="off" id="code"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <div slot="footer" class="dialog-footer">-->
      <!--          <el-button @click="joinDialogFormVisible = false">取 消</el-button>-->
      <!--          <el-button type="primary" @click="submitCode('form')">确 定</el-button>-->
      <!--        </div>-->
      <!--      </el-dialog>-->
      <!--      <el-dialog title="创建课程" :visible.sync="establishDialogFormVisible" :close-on-click-modal="false"-->
      <!--                 style="text-align: left">-->
      <!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
      <!--          <el-tab-pane label="基本信息（必填）" name="first">-->
      <!--            <el-form :model="establishForm" ref="form1" :rules="establishRules">-->
      <!--              <el-form-item label="课程名字" :label-width="formLabelWidth" prop="courseName"-->
      <!--                            :rules="establishRules.courseName" class="is-required">-->
      <!--                <el-input v-model="establishForm.courseName" autocomplete="off" id="courseName" maxlength="50"-->
      <!--                          show-word-limit></el-input>-->
      <!--              </el-form-item>-->
      <!--              <el-form-item label="教学班级" :label-width="formLabelWidth" prop="studyClass"-->
      <!--                            :rules="establishRules.studyClass" class="is-required">-->
      <!--                <el-input v-model="establishForm.studyClass" autocomplete="off" id="studyClass" maxlength="30"-->
      <!--                          show-word-limit></el-input>-->
      <!--              </el-form-item>-->
      <!--              <el-row :gutter="20">-->
      <!--                <el-col :span="20">-->
      <!--                  <el-form-item label="选择学年 - 学期" class="is-required">-->
      <!--                    <el-col :span="6">-->
      <!--                      <el-autocomplete-->
      <!--                          class="inline-input"-->
      <!--                          v-model="schoolYearState"-->
      <!--                          :fetch-suggestions="querySearchSchoolYear"-->
      <!--                          placeholder="请选择学年"-->
      <!--                          @select="handleSelectSchoolYear"-->
      <!--                      ></el-autocomplete>-->
      <!--                    </el-col>-->
      <!--                    <el-col :span="6">-->
      <!--                      <el-autocomplete-->
      <!--                          class="inline-input"-->
      <!--                          v-model="semesterState"-->
      <!--                          :fetch-suggestions="querySearchSemester"-->
      <!--                          placeholder="请选择学期"-->
      <!--                          @select="handleSelectSemester"-->
      <!--                      ></el-autocomplete>-->
      <!--                    </el-col>-->
      <!--                  </el-form-item>-->
      <!--                </el-col>-->
      <!--              </el-row>-->
      <!--              <div class="moreInformation" @click="showMoreInformation">-->
      <!--                更多信息-->
      <!--                <i class="el-icon-arrow-down" style="display: block; padding-top: 3px;" v-if="isHide"></i>-->
      <!--                <i class="el-icon-arrow-up" style="padding-top: 3px; margin-left: 5px;" v-else></i>-->
      <!--              </div>-->
      <!--              <div class="noneView" v-show="!isHide">-->
      <!--                <div class="header">-->
      <!--                  <div class="left-radio">-->
      <!--                    <span>授课模式</span>-->
      <!--                    <el-radio-group v-model="radio">-->
      <!--                      <el-radio :label="3">线下</el-radio>-->
      <!--                      <el-radio :label="6">线上</el-radio>-->
      <!--                      <el-radio :label="9">混合</el-radio>-->
      <!--                    </el-radio-group>-->
      <!--                  </div>-->
      <!--                  <div class="right-time">-->
      <!--                    <span>学时数</span>-->
      <!--                    <div class="timer">-->
      <!--                      <input type="text" v-model="studyTime" placeholder="请输入学时"-->
      <!--                             oninput="value=value.replace(/[^\d]/g,'')">-->
      <!--                    </div>-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--                <div class="courseIntroduce">-->
      <!--                  <p>课程介绍</p>-->
      <!--                  <div style="border: 1px solid #ccc;">-->
      <!--                    <Toolbar-->
      <!--                        style="border-bottom: 1px solid #ccc"-->
      <!--                        :editor="editor"-->
      <!--                        :defaultConfig="toolbarConfig"-->
      <!--                        :mode="mode"-->
      <!--                    />-->
      <!--                    <Editor-->
      <!--                        style="height: 200px; overflow-y: hidden;"-->
      <!--                        v-model="html"-->
      <!--                        :defaultConfig="editorConfig"-->
      <!--                        :mode="mode"-->
      <!--                        @onCreated="onCreated"-->
      <!--                    />-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--                <div class="classAddress">-->
      <!--                  <span>授课地点</span>-->
      <!--                  <el-input v-model="input" placeholder="请输入内容"></el-input>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </el-form>-->
      <!--            <div class="dialog-footer">-->
      <!--              <div class="footer-area">-->
      <!--                <div class="upload">-->
      <!--                  <el-upload-->
      <!--                      class="upload-demo"-->
      <!--                      action="https://jsonplaceholder.typicode.com/posts/"-->
      <!--                      multiple-->
      <!--                      :limit="1"-->
      <!--                      :on-exceed="handleExceed"-->
      <!--                      :file-list="fileList">-->
      <!--                    <div class="import">-->
      <!--                      <i class="el-icon-plus"></i>-->
      <!--                      <p>导入mbz格式课程包</p>-->
      <!--                    </div>-->
      <!--                  </el-upload>-->
      <!--                </div>-->
      <!--                <div class="finish">-->
      <!--                  <el-button @click="establishDialogFormVisible = false">取 消</el-button>-->
      <!--                  <el-button type="primary" @click="submitEstablish('form1')">确 定</el-button>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </el-tab-pane>-->
      <!--          <el-tab-pane label="报名设置" name="second">-->
      <!--            <div class="registration-settings">-->
      <!--              <div class="left-setting">-->
      <!--                <el-tooltip-->
      <!--                    content="打开“报名开关”后，需要参与者先报名，只有报名成功的参与者才能参与课程。您可以设置报名者需提交的信息并进行审核。“报名开关”关闭时，任何人均可参与课程。"-->
      <!--                    placement="top">-->
      <!--                  <span>报名设置<i class="el-icon-question"></i></span>-->
      <!--                </el-tooltip>-->
      <!--              </div>-->
      <!--              <div class="right-setting">-->
      <!--                <el-switch-->
      <!--                    v-model="value"-->
      <!--                    active-color="#409EFF"-->
      <!--                    inactive-color="#DADCE0">-->
      <!--                </el-switch>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </el-tab-pane>-->
      <!--        </el-tabs>-->
      <!--        &lt;!&ndash;        <div slot="footer" class="dialog-footer">&ndash;&gt;-->
      <!--        &lt;!&ndash;          <div class="footer-area">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <div class="upload">&ndash;&gt;-->
      <!--        &lt;!&ndash;              <el-upload&ndash;&gt;-->
      <!--        &lt;!&ndash;                  class="upload-demo"&ndash;&gt;-->
      <!--        &lt;!&ndash;                  action="https://jsonplaceholder.typicode.com/posts/"&ndash;&gt;-->
      <!--        &lt;!&ndash;                  multiple&ndash;&gt;-->
      <!--        &lt;!&ndash;                  :limit="1"&ndash;&gt;-->
      <!--        &lt;!&ndash;                  :on-exceed="handleExceed"&ndash;&gt;-->
      <!--        &lt;!&ndash;                  :file-list="fileList">&ndash;&gt;-->
      <!--        &lt;!&ndash;                <div class="import">&ndash;&gt;-->
      <!--        &lt;!&ndash;                  <i class="el-icon-plus"></i>&ndash;&gt;-->
      <!--        &lt;!&ndash;                  <p>导入mbz格式课程包</p>&ndash;&gt;-->
      <!--        &lt;!&ndash;                </div>&ndash;&gt;-->
      <!--        &lt;!&ndash;              </el-upload>&ndash;&gt;-->
      <!--        &lt;!&ndash;            </div>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <div class="finish">&ndash;&gt;-->
      <!--        &lt;!&ndash;              <el-button @click="establishDialogFormVisible = false">取 消</el-button>&ndash;&gt;-->
      <!--        &lt;!&ndash;              <el-button type="primary" @click="submitEstablish('form2')">确 定</el-button>&ndash;&gt;-->
      <!--        &lt;!&ndash;            </div>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </div>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </div>&ndash;&gt;-->
      <!--      </el-dialog>-->
      <el-dropdown @command="handleCommand" trigger="click">
        <el-button type="primary" v-show="role==='teacher'">
          <div class="add">
            <i class="el-icon-plus"></i>
            <p>创建/加入课程</p>
          </div>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="establish">创建课程</el-dropdown-item>
          <el-dropdown-item command="join">加入课程</el-dropdown-item>
          <!--          <el-dropdown-item>-->
          <!--            <el-button type="primary" @click="dialogFormVisible = true" v-show="role==='student'">-->
          <!--              <div class="add">-->
          <!--                <i class="el-icon-plus"></i>-->
          <!--                <p>加入课程</p>-->
          <!--              </div>-->
          <!--            </el-button>-->
          <!--          </el-dropdown-item>-->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="加入课程" v-dialog-drag :visible.sync="joinDialogFormVisible" :close-on-click-modal="false"
               style="text-align: left">
      <el-form :model="joinForm" ref="form">
        <el-form-item label="加课码" :label-width="formLabelWidth" prop="code"
                      :rules="joinRules" class="is-required">
          <el-input v-model="joinForm.code" autocomplete="off" id="code"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="joinDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCode('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="创建课程" v-dialog-drag :visible.sync="establishDialogFormVisible" :close-on-click-modal="false"
               style="text-align: left">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息（必填）" name="first">
          <el-form :model="establishForm" ref="form1" :rules="establishRules">
            <el-form-item label="课程名字" :label-width="formLabelWidth" prop="courseName"
                          :rules="establishRules.courseName" class="is-required">
              <el-input v-model="establishForm.courseName" autocomplete="off" id="courseName" maxlength="50"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="教学班级" :label-width="formLabelWidth" prop="studyClass"
                          :rules="establishRules.studyClass" class="is-required">
              <el-input v-model="establishForm.studyClass" autocomplete="off" id="studyClass" maxlength="30"
                        show-word-limit></el-input>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="选择学年 - 学期" class="is-required">
                  <el-col :span="6">
                    <el-autocomplete
                        class="inline-input"
                        v-model="schoolYearState"
                        :fetch-suggestions="querySearchSchoolYear"
                        placeholder="请选择学年"
                        @select="handleSelectSchoolYear"
                    ></el-autocomplete>
                  </el-col>
                  <el-col :span="6">
                    <el-autocomplete
                        class="inline-input"
                        v-model="semesterState"
                        :fetch-suggestions="querySearchSemester"
                        placeholder="请选择学期"
                        @select="handleSelectSemester"
                    ></el-autocomplete>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="moreInformation" @click="showMoreInformation">
              更多信息
              <i class="el-icon-arrow-down" style="display: block; padding-top: 3px;" v-if="isHide"></i>
              <i class="el-icon-arrow-up" style="padding-top: 3px; margin-left: 5px;" v-else></i>
            </div>
            <div class="noneView" v-show="!isHide">
              <div class="header">
                <div class="left-radio">
                  <span>授课模式</span>
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">线下</el-radio>
                    <el-radio :label="6">线上</el-radio>
                    <el-radio :label="9">混合</el-radio>
                  </el-radio-group>
                </div>
                <div class="right-time">
                  <span>学时数</span>
                  <div class="timer">
                    <input type="text" v-model="studyTime" placeholder="请输入学时"
                           oninput="value=value.replace(/[^\d]/g,'')">
                  </div>
                </div>
              </div>
              <div class="courseIntroduce">
                <p>课程介绍</p>
                <div style="border: 1px solid #ccc;">
                  <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editor"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                  />
                  <Editor
                      style="height: 200px; overflow-y: hidden;"
                      v-model="html"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="onCreated"
                  />
                </div>
              </div>
              <div class="classAddress">
                <span>授课地点</span>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </div>
            </div>
          </el-form>
          <div class="dialog-footer">
            <div class="footer-area">
              <div class="upload">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                  <div class="import">
                    <i class="el-icon-plus"></i>
                    <p>导入mbz格式课程包</p>
                  </div>
                </el-upload>
              </div>
              <div class="finish">
                <el-button @click="establishDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEstablish('form1')">确 定</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="报名设置" name="second">
          <div class="registration-settings">
            <div class="left-setting">
              <el-tooltip
                  content="打开“报名开关”后，需要参与者先报名，只有报名成功的参与者才能参与课程。您可以设置报名者需提交的信息并进行审核。“报名开关”关闭时，任何人均可参与课程。"
                  placement="top">
                <span>报名设置<i class="el-icon-question"></i></span>
              </el-tooltip>
            </div>
            <div class="right-setting">
              <el-switch
                  v-model="value"
                  active-color="#409EFF"
                  inactive-color="#DADCE0">
              </el-switch>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--        <div slot="footer" class="dialog-footer">-->
      <!--          <div class="footer-area">-->
      <!--            <div class="upload">-->
      <!--              <el-upload-->
      <!--                  class="upload-demo"-->
      <!--                  action="https://jsonplaceholder.typicode.com/posts/"-->
      <!--                  multiple-->
      <!--                  :limit="1"-->
      <!--                  :on-exceed="handleExceed"-->
      <!--                  :file-list="fileList">-->
      <!--                <div class="import">-->
      <!--                  <i class="el-icon-plus"></i>-->
      <!--                  <p>导入mbz格式课程包</p>-->
      <!--                </div>-->
      <!--              </el-upload>-->
      <!--            </div>-->
      <!--            <div class="finish">-->
      <!--              <el-button @click="establishDialogFormVisible = false">取 消</el-button>-->
      <!--              <el-button type="primary" @click="submitEstablish('form2')">确 定</el-button>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
    </el-dialog>
  </div>
</template>

<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import DropClass from "@/components/public_components/DropClass.vue";

export default {
  components: {Editor, Toolbar, DropClass},
  data() {
    const judgeCode = new RegExp(/^[A-Z0-9]{6}$/);
    const validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('必填项'));
      } else if (judgeCode.test(value)) {
        callback()
      } else {
        callback(new Error('不符合加课码格式'))
      }
    }
    const validateCourseName = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('必填项'));
      } else {
        callback()
      }
    }

    const validateStudyClass = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('必填项'));
      } else {
        callback()
      }
    }

    const validateCourseTime = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('必填项'));
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      cards: '',
      joinDialogFormVisible: false,
      establishDialogFormVisible: false,
      formLabelWidth: '120px',
      schoolYearState: '',
      schoolYear: [],
      semesterState: '',
      semester: [],
      radio: '',
      studyTime: '',
      joinForm: {
        code: ''
      },
      joinRules: [
        {validator: validateCode, trigger: 'blur'}
      ],
      establishForm: {
        courseName: '',
        studyClass: '',
        schoolYear: '',
        semester: ''
      },
      establishRules: {
        courseName: [
          {validator: validateCourseName, trigger: 'blur'}
        ],
        studyClass: [
          {validator: validateStudyClass, trigger: 'blur'}
        ],
        courseTime: [
          {validator: validateCourseTime, trigger: 'blur'}
        ],
      },
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default', // or 'simple'
      input: '',
      value: false,
      fileList: [],
      isHide: true,
    }
        ;
  },
  methods: {
    getTopCourse() {
      this.request.post('/getTopCourse', {
        username: localStorage.getItem("username"),
        role: localStorage.getItem("role")
      }).then((res) => {
        this.cards = res
      })
    },
    // cancelTopCourse(data) {
    //   for (let i = 0; i < this.cards.length; i++) {
    //     if (this.cards[i].courseName === data.courseName) {
    //       this.cards.splice(i, 1)
    //     }
    //   }
    // },
    cancelTop(index) {
      console.log(this.cards[index].courseCode)
      this.request.post('/cancelTopping', {
        courseCode: this.cards[index].courseCode
      }).then((data) => {
        if (data === "取消置顶课程失败，数据库数据没有变化") {
          this.$message.error("取消置顶课程失败，数据库数据没有变化")
        } else if (data === "取消置顶课程成功") {
          this.$message({
            message: "取消置顶课程成功",
            type: "success"
          })
          this.getTopCourse()
          this.$bus.$emit("cancelTopping", this.cards[index].courseCode)
        }
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCommand(command) {
      if (command === "join") {
        this.joinDialogFormVisible = true;
      } else if (command === "establish") {
        this.establishDialogFormVisible = true;
      }
    },
    handleCommandClass(command) {
      if (command === "dropClass") {
        this.$bus.$emit('dropClass', true)
      } else if (command === "backFile") {
      }
    },
    intoClass(item) {
      this.$bus.$emit('isinClass', true)
      this.$router.push({
        path: '/classDetail/courseContent',
        // query: {
        //   backgroundImage: this.card.backgroundImage,
        //   courseName: this.card.courseName,
        //   studyClass: this.card.studyClass,
        //   courseCode: this.card.courseCode,
        //   courseNumber: this.card.courseNumber
        // }
      })
      this.$store.commit("courseInformation/setCourseInformation", {
        backgroundImage: item.backgroundImage,
        courseName: item.courseName,
        studyClass: item.studyClass,
        courseCode: item.courseCode,
        courseNumber: item.courseNumber
      })
    },

    submitCode(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post('/joinCourse', {
            code: this.joinForm.code,
            role: localStorage.getItem("role"),
            username: localStorage.getItem("username")
          }).then((data) => {
            if (data === "不存在该课程") {
              this.$message.error("不存在该课程")
              this.$refs[formName].resetFields();
            } else {
              if (data === "加入课程成功") {
                this.$message({
                  message: "加入课程成功",
                  type: "success"
                })
                this.joinDialogFormVisible = false;
                this.getTopCourse()
                // this.$bus.$emit('refresh', true)
                this.$parent.getStudyCourse()
                this.$parent.getHelpCourse()
                this.$parent.getTeachCourse()
                this.$refs[formName].resetFields();
              } else {
                this.$message.error('你已经加入该课程，加入失败')
                this.$refs[formName].resetFields();
              }
            }
          })
        } else {
          this.$message.error('请完成信息填写')
        }
      })
    },
    queryRadio(radio) {
      switch (radio) {
        case 3:
          this.radio = "线下";
          break;
        case 6:
          this.radio = "线上";
          break;
        case 9:
          this.radio = "混合";
          break;
        default:
          console.log("没有选择教学方式！")
      }
    },
    submitEstablish(formName) {
      this.queryRadio(this.radio)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post('/establishCourse', {
            username: localStorage.getItem("username"),
            courseName: this.establishForm.courseName,
            studyClass: this.establishForm.studyClass,
            courseTime: this.establishForm.schoolYear.value + " " + this.establishForm.semester.value,
            studyTime: this.studyTime,
            teachingMode: this.radio,
            courseIntroduce: this.editor.getText(),
            courseSpace: this.input,
          }).then((data) => {
            if (data === "新增课程成功") {
              this.$message({
                message: "新增课程成功",
                type: "success"
              })
              this.establishDialogFormVisible = false
              this.getTopCourse()
              // this.$bus.$emit('refresh', true)
              this.$parent.getStudyCourse()
              this.$parent.getHelpCourse()
              this.$parent.getTeachCourse()
              this.$refs[formName].resetFields();
              this.clear()
            } else if (data === "新增课程信息失败，数据库没有成功存储课程信息") {
              this.$message.error("新增课程信息失败，数据库没有成功存储课程信息")
              this.$refs[formName].resetFields();
            } else if (data === "新增老师与课程的关系失败，数据库并没有将老师与课程的关系存储下来") {
              this.$message.error("新增老师与课程的关系失败，数据库并没有将老师与课程的关系存储下来")
              this.$refs[formName].resetFields();
            }
          })
        } else {
          this.$message.error('请完成信息填写')
        }
      })
    },
    querySearchSchoolYear(queryString, cb) {
      let schoolYear = this.schoolYear;
      let results = queryString ? schoolYear.filter(this.createFilterSchoolYear(queryString)) : schoolYear;
      cb(results);
    },
    createFilterSchoolYear(queryString) {
      return (schoolYear) => {
        return (schoolYear.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadSchoolYear() {
      return [{value: '2023-2024'}, {value: '2024-2025'}, {value: '2025-2026'}, {value: '2021-2022'}, {value: '2022-2023'}]
    },
    handleSelectSchoolYear(item) {
      this.establishForm.schoolYear = item
    },
    querySearchSemester(queryString, cb) {
      let semester = this.semester;
      let results = queryString ? semester.filter(this.createFilterSemester(queryString)) : semester;
      cb(results);
    },
    createFilterSemester(queryString) {
      return (semester) => {
        return (semester.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadSemester() {
      return [{value: '全年'}, {value: '第一学期'}, {value: '第二学期'}]
    },
    handleSelectSemester(item) {
      this.establishForm.semester = item
    },
    showMoreInformation() {
      this.isHide = !this.isHide
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    clear() {
      this.establishForm.schoolYear.value = ''
      this.establishForm.semester.value = ''
      this.studyTime = ''
      this.editor = ''
      this.radio = ''
      this.input = ''
    }
  },
  props: ['role'],
  // create() {
  //   this.imageUrl = "../../assets/img/course/ " + (Math.floor(Math.random() * 5) + 1) + ".jpg"
  // },
  beforeCreate() {
    // console.log(this.backgroundImage)
    // this.imageUrl = this.backgroundImage[Math.floor(Math.random() * 5)]
    // console.log(this.imageUrl)
    // this.imageUrl = require('../../assets/img/course/01.jpg')
  },
  mounted() {
    this.getTopCourse()
    this.schoolYear = this.loadSchoolYear()
    this.semester = this.loadSemester()
    // url("../../assets/img/course/01.jpg")
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  watch: {
    cards() {
      this.$bus.$on('topping', (data) => {
        if (data) {
          this.getTopCourse()
        }
      })
    },

  }
}

</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.main-box {
  max-width: 1470px;
  margin: 0 auto;
}

.main {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.main-content {
  flex: 1;
}

.topped {
  border: 1px solid #dadce0;
  padding: 18px;
  border-radius: 8px;
}

.topped-header {
  display: flex;
  justify-content: space-between;
}

.left {
  font-size: 25px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  color: #575a5b;
  font-weight: 500;
}

.right {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  color: #4285f4;
}

.el-button {
  height: 45px;
  white-space: nowrap;
}

.add {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}

.right i {
  margin: 0;
}

.right p {
  margin-left: 5px;
}

.topped-main {
  max-height: 350px;
  margin: 15px -10px 0;
  display: flex;
  flex-flow: row wrap;
  overflow-y: auto;
}

.right1 {
  margin-top: 30px;
  text-align: end;
}

.main-card {
  margin: 13px;
  width: 325px;
  height: 310px;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.upper-right-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  height: 35px;
  border-radius: 0 0 0 10px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  background: linear-gradient(270deg, #fac966 0, #ffe1ad);
  color: #6b512e;
  line-height: 32px;
  font-size: 18px;
  text-align: center;
}

.card-header {
  cursor: pointer;
  padding: 24px 30px;
  height: 180px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
//background-color: #3367d5; //background-image: url("../../assets/img/course/01.jpg");
}

.time {
  opacity: 0.6;
  font-size: 16px;
}

.name {
  margin-top: 7px;
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 32px;
}

.classname {
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 38px;
  font-size: 16px;
}

.qrcode {
  margin-top: 18px;
  display: flex;
  position: relative;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 16px;
}

.qrcode img {
  display: block;
  width: 16px;
  margin-right: 8px;
}

.qrcode span {
  font-size: 18px;
}

.card-content {
  cursor: pointer;
  height: 70px;
  padding: 0 20px 16px 20px;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 8px 14px 12px;
  font-size: 12px;
  line-height: 16px;
  font-family: PingFangSC, PingFangSC-Regular, sans-serif;
  font-weight: 400;
  text-align: left;
  color: #3c4043;
}

.left {
  display: flex;
  align-items: center;
}

.role {
  background-color: #fff;
  border: 1px solid #4285f4;
  color: #4285f4;
  min-width: 30px;
  max-width: 50px;
  height: 30px;
  line-height: 26px;
  display: inline-block;
  border-radius: 2px;
  font-size: 16px;
  text-align: center;
  margin-right: 8px;
}

.res-person {
  font-size: 18px;
  cursor: pointer;

}

.right {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  color: black;
}

.set-top {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.set-top img {
  display: block;
  width: 17px;
  margin-right: 4px;
}

.three-point {
  cursor: pointer;
  margin-left: 11px;
}

.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}


::v-deep .el-dropdown-menu__item {
  font-size: 18px;
}

::v-deep .el-dialog {
  border-right: 12px;
  margin-top: 12vh !important;
}

::v-deep .el-dialog__header {
  padding: 20px 40px 20px;
  border-bottom: 1px solid #dadce0;
}

::v-deep .el-dialog__title {
  text-align: right;
  font-size: 21px;
  font-weight: 500;
}

::v-deep .el-dialog__headerbtn {
  font-size: 32px;
  top: 13px;
  right: 18px;
}

::v-deep .el-dialog__body {
  padding: 20px 20px;
}

::v-deep .el-form {
  margin-top: 30px;
}

::v-deep .el-dialog__footer {
  padding: 0 20px 20px;
  border-top: 1px solid #dadce0;
}

::v-deep .el-form-item__label {
  font-size: 16px;
}

::v-deep .dialog-footer {
  margin-top: 20px;
}

::v-deep .el-tabs__header {
  margin: 0 20px 15px;
}

::v-deep .el-tabs__item {
  font-size: 20px;
}

.moreInformation {
  color: #2092e6;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  display: flex;
}

::v-deep .el-icon-arrow-down {
  font-size: 18px;
  margin-left: 5px;
}

.noneView {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
}

.noneView .header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
}

.noneView .left-radio {
  display: flex;
  align-items: center;
  margin-right: 50px;
  color: #3c4043;
  font-size: 14px;
}

.left-radio span {
  margin-right: 12px;
  font-size: 18px;
}

.noneView .right-time {
  display: flex;
  align-items: center;
  margin-top: -7px;
}

.right-time span {
  color: #3c4043;
  font-size: 18px;
  margin-right: 8px;
}

.right-time .timer {
  width: 110px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
}

.right-time input {
  border: none;
  width: 100px;
  outline: none;
  color: #afb1b3;
  font-size: 14px;
}

::v-deep .el-radio__label {
  padding-left: 16px;
}

::v-deep .el-radio__inner {
  width: 18px;
  height: 18px;
}

.courseIntroduce p {
  font-size: 18px;
  margin-bottom: 12px;
}

::v-deep .el-tabs__header {
  z-index: 0;
}

.classAddress {
  display: flex;
  align-items: center;
}

.classAddress span {
  margin-right: 16px;
  white-space: nowrap;
  font-size: 18px;
}

.registration-settings {
  display: flex;
  align-items: center;
}

.registration-settings .left-setting {
  margin-top: 10px;
  margin-left: 20px;
  font-size: 18px;
}

.el-icon-question {
  margin-left: 10px;
}

.registration-settings .right-setting {
  margin-left: 50px;
  margin-top: 10px;
}

.footer-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload {
  font-size: 12px;
  color: #4285f4;
  cursor: pointer;
}

.import {
  display: flex;
  font-size: 16px;
}

.el-icon-plus {
  padding-top: 3px;
}

.el-icon-arrow-down {
  margin-left: 8px;
}


</style>